<template>
  <div class="channelEditor">
    <!-- 我的频道 -->
    <van-cell title="我的频道" size="large" :border="false" class="title-text">
      <template #default>
        <van-button
          type="danger"
          size="mini"
          plain
          round
          class="editor"
          @click="isEdit = !isEdit"
          >{{ isEdit ? '完成' : '编辑' }}</van-button
        >
      </template>
    </van-cell>
    <!-- 我的频道宫格 -->
    <van-grid :column-num="4">
      <van-grid-item
        v-for="(item, index) in myChannels"
        :key="index"
        class="my-channel"
        :text="item.name"
        @click="onChannelClick(item, index)"
      >
        <van-icon
          slot="icon"
          name="close"
          v-show="isEdit && !fixedChannel.includes(item.id)"
        ></van-icon>
      </van-grid-item>
    </van-grid>

    <!-- 频道推荐 -->
    <van-cell title="频道推荐" size="large" :border="false" class="title-text">
    </van-cell>

    <!-- 频道推荐宫格 -->
    <van-grid :column-num="4">
      <van-grid-item
        v-for="(value, index) in recommandChannels"
        :key="index"
        icon="plus"
        :text="value.name"
        class="recommandChannel"
        @click="addChannels(value)"
      />
    </van-grid>
  </div>
</template>

<script>
import {
  getAllChannels,
  addUserChannels,
  deleteMyChannels,
} from '@/api/channels.js';
// 导入辅助函数，来操作state,因为判断用户是否登录的user存储在容器state里面。
import { mapState } from 'vuex';
// 导入本地储存的方法
import { setItem } from '@/utils/storage.js';

export default {
  name: 'channel-editor',
  props: {
    myChannels: {
      type: Array,
      required: true,
    },
    active: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      // 所有的频道列表数据
      allChannels: [],
      // 控制编辑的显示和隐藏
      isEdit: false,
      fixedChannel: [0],
    };
  },
  created() {
    this.loadAllChannels();
  },
  computed: {
    // 在计算属性里面进行映射，来讲user导入
    ...mapState(['user']),
    recommandChannels() {
      // 计算属性会依赖于观测数据的变化，当数据发生了变化的时候就会重新计算
      // 利用数组的筛选过滤方法,刷选出符合条件的数组元素，并且返回一个新的数组
      return this.allChannels.filter((item) => {
        return !this.myChannels.find((value) => {
          return value.id === item.id;
        });
      });
      //   var channels = [];
      //   // 遍历allChannels这个数组，然后根据条件去查找出allChannels中不包含myChannels的元素的元素
      //   this.allChannels.forEach((item) => {
      //     var ret = this.myChannels.find((value) => {
      //       return value.id === item.id;
      //     });
      //     // 每次循环遍历一次，将符合条件的值给追加值数组中
      //     if (!ret) {
      //       channels.push(item);
      //     }
      //   });
      //   //   返回一个计算结果
      //   return channels;
      // },
    },
  },
  methods: {
    // 加载所有的频道数据
    async loadAllChannels() {
      try {
        const { data } = await getAllChannels();
        // console.log(data);
        this.allChannels = data.data.channels;
      } catch (err) {
        console.log(err);
        this.$toast('获取所有的频道列表数据失败！');
      }
    },
    // 添加频道
    async addChannels(value) {
      console.log(value);
      // 将拿到的值添加值数组
      // 这里巧妙的结合了计算属性
      this.myChannels.push(value);
      // 判断用户是否登录
      // 如果user里面有数据，则就是登录状态，否则就是未登录状态
      if (this.user) {
        try {
          // 已登录，将数据存放到线上的接口
          await addUserChannels({
            id: value.id,
            seq: this.myChannels.length,
          });
        } catch (err) {
          this.$toast('更新数据失败，请稍后在试！');
        }
      } else {
        // 未登录，将数据存放到本地储存
        setItem('token_mychannels', this.myChannels);
      }
    },
    // 处理我的频道的编辑和删除
    onChannelClick(item, index) {
      // console.log(item, index);
      // 如果是编辑状态，则处理删除我的频道
      // 如果不是，则处理切换tab栏切换
      if (this.isEdit) {
        // console.log('删除');
        // 1.如果是固定选项，则不删除
        if (this.fixedChannel.includes(item.id)) {
          return;
        }
        // 2.删除
        this.myChannels.splice(index, 1);
        // 3.如果删除的是当前被激活项之前的项，则让active-1
        if (index <= this.active) {
          this.$emit('upDateTab', this.active - 1, true);
        }
        // 4.处理删除的频道数据持久化操作
        this.deleteChannels(item);
      } else {
        // 通过自定义事件来通知父组件修改这个tab栏切换
        this.$emit('upDateTab', index, false);
      }
    },
    // 4.处理删除的频道数据持久化操作
    async deleteChannels(channel) {
      // 如果用户已登录，就将数据同步到后天服务器
      // 如果用户未登录，就将更新的数据存储到本地存储
      if (this.user) {
        try {
          await deleteMyChannels(channel.id);
        } catch (err) {
          this.$toast('处理失败，请重试！');
        }
      } else {
        setItem('token_mychannels', this.myChannels);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.channelEditor {
  padding-top: 100px;
  .title-text {
    font-size: 24px;
  }
  .editor {
    width: 100px;
  }
  /deep/ .van-icon-close::before {
    position: absolute;
    top: -30px;
    left: 45px;
    font-size: 40px;
    color: red;
  }
  .van-icon {
    display: unset;
  }
  /deep/ .van-grid-item__text,
  .text {
    color: black;
    font-size: 28px;
  }
  .active {
    color: red !important;
  }
  /deep/ .van-grid-item__content {
    background-color: #f4f5f6;
  }
  /deep/ .van-grid-item__content {
    width: 160px;
    height: 86px;
    margin-bottom: 20px;
  }
  //   频道推荐样式
  .recommandChannel {
    /deep/ .van-grid-item__content {
      white-space: nowrap;
      flex-direction: row;
    }
    /deep/ .van-icon-plus::before {
      font-size: 40px;
    }
  }
}
</style>
